<!--
*  2021-03-15
*  历史环节数据
-->
<template>
  <div id="app" class="historical">
    <!-- 头部导航 -->
    <van-nav-bar
      left-arrow
      :title="title"
      left-text="重新扫码"
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <van-cell title="织机号">
      <template #default>
        <van-button type="primary" @click="showPicker = true"
          >{{ loomNo }} 修改</van-button
        >
      </template>
    </van-cell>
    <!-- 确认信息 -->
    <better-scroll
      class="public-scroll"
      :data="tableData"
      :totalPage="totalPage"
    >
      <van-cell-group>
        <van-cell v-for="(data, index) in tableData" :key="index">
          <template slot="title">
            <div class="historical-cell">
              <span>{{ data.stepName }}</span>
              <span>{{ data.operatorName }}</span>
              <span>{{ data.finishAt }}</span>
            </div>
          </template>
          <template slot="default">
            <van-button
              type="primary"
              v-if="data.stepType != 2"
              @click="onClickCheckRes(data)"
              >查看环节数据</van-button
            >
            <van-button
              type="danger"
              v-if="data.stepType == 2"
              @click="onClickChildList(data)"
              >查看子任务</van-button
            >
          </template>
        </van-cell>
      </van-cell-group>
    </better-scroll>

    <!-- 重新扫码 -->
    <van-dialog
      v-model="isLogin"
      title="确认重新扫码？"
      show-cancel-button
      confirm-button-text="重新扫码"
      @confirm="onClickBack"
    >
      <span>扫码后需重新登陆</span>
    </van-dialog>

    <!-- 数据列表 -->
    <van-popup
      v-model="showPopup"
      position="right"
      :style="{ width: '100%', height: '100%' }"
    >
      <historical-list :title="stepName" :id="id" @hidePopup="onClickBackPup" />
    </van-popup>

    <!-- 选择织机 -->
    <van-popup
      v-model="showPicker"
      position="bottom"
      :style="{ width: '100%', height: '70%' }"
    >
      <van-picker
        title="机台号"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { openWin } from "@/utils/index";
import HistoricalList from "./historical-list/App";
import {
  getByType,
  getWeavingChangeLoom,
  getWeavingTitleByTask,
} from "@/api/warping";
export default {
  name: "historical",
  components: { HistoricalList },
  data() {
    return {
      tableData: [],
      totalPage: 1,
      showPopup: false,
      isLogin: false,
      title: "",
      id: "",
      stepName: "",
      loomNo: "",
      columns: [],
      showPicker: false,
      taskId: "",
    };
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      that.$nextTick(() => {
        that.tableData = window.api.pageParam.tableData;
        // that.title = window.api.pageParam.title;
        that.loomNo = window.api.pageParam.loomNo;
        that.taskId = window.api.pageParam.taskId;
        that.onGetTaskTitle();
        that.onGetTableList();
        // 监听页面消失的时候，关掉页面就可以了
        window.api.addEventListener(
          {
            name: "viewdisappear",
          },
          function () {
            window.api.closeWin();
          }
        );
      });
    } else {
      window.apiready = () => {
        that.tableData = window.api.pageParam.tableData;
        // that.title = window.api.pageParam.title;
        that.loomNo = window.api.pageParam.loomNo;
        that.taskId = window.api.pageParam.taskId;
        that.onGetTaskTitle();
        that.onGetTableList();
        // 监听页面消失的时候，关掉页面就可以了
        window.api.addEventListener(
          {
            name: "viewdisappear",
          },
          function () {
            window.api.closeWin();
          }
        );
      };
    }
  },
  methods: {
    // 重新扫码
    onClickLeft() {
      this.isLogin = true;
    },
    // 重新扫码
    onClickBack() {
      openWin("index");
    },
    // 获取标题
    onGetTaskTitle() {
      // alert(this.taskId)
      getWeavingTitleByTask(
        {
          taskId: this.taskId,
        },
        (res) => {
          this.title = res;
        }
      );
    },
    // 获取织机配置
    onGetTableList() {
      const that = this;
      getByType(
        {
          pageSize: 1000,
          type: 10,
        },
        (res) => {
          res.list.forEach((item) => {
            that.columns.push(item.propertyName);
          });
        }
      );
    },
    // 修改织机号
    onConfirm(value) {
      if (value) {
        getWeavingChangeLoom(
          {
            taskId: this.taskId,
            loomNo: value,
          },
          () => {
            this.loomNo = value;
            this.$toast.success("织机号修改成功");
          }
        );
      }
      this.showPicker = false;
    },
    // 查看数据
    onClickCheckRes(data) {
      this.id = data.id.toString();
      this.stepName = data.stepName;
      this.showPopup = true;
    },
    // 子任务
    onClickChildList(data) {
      openWin("historical-task", {
        tableData: this.tableData,
        title: this.title,
        resId: this.resId,
        loomNo: this.loomNo,
        taskId: data.taskId,
      });
    },
    onClickBackPup() {
      this.id = "";
      this.stepName = "";
      this.showPopup = false;
    },
  },
};
</script>

<style lang="scss">
.historical {
  display: flex;
  flex-direction: column;
  & > .van-cell {
    .van-cell__title {
      display: flex;
      align-items: center;
      span {
        font-size: 24px;
      }
    }
    .van-cell__value {
      .van-field {
        padding: 0;
      }
      .van-field__control {
        text-align: end;
        font-size: 24px;
        line-height: 32px;
      }
    }
  }
  .public-scroll {
    height: calc(100vh - 152px);
    .van-cell__title {
      flex: 0 0 80%;
      .historical-cell {
        display: flex;
        justify-content: space-between;
        span {
          flex: 1;
          font-size: 20px;
          text-align: center;
        }
      }
    }
  }
  .van-icon-success::before {
    position: relative;
    top: 15px;
    font-size: 36px;
  }

  .van-dialog {
    width: 560px;
    height: 417px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .van-dialog__header {
      font-size: 36px;
      color: #333333;
      margin-top: 20px;
    }
    .van-dialog__content {
      font-size: 30px;
      color: #333333;
      text-align: center;
    }
    .van-dialog__footer {
      height: 80px;
      .van-button {
        height: 100%;
        font-size: 36px;
        color: #1677ff;
      }
    }
    .van-cell__title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .van-cell__title,
    .van-cell__value {
      span {
        font-size: 26px;
      }
    }
    .van-cell-group {
      .van-cell {
        margin: 15px 0;
      }
    }
  }
  .historical-btn {
    width: 700px;
    height: 100px;
    background: #1677ff;
    border-radius: 2px;
    font-size: 32px;
    color: #ffffff;
    margin: 0 auto;
  }
  .van-popup {
    .van-picker {
      height: 100%;
      .van-picker__columns {
        height: 100% !important;
        .van-ellipsis {
          font-size: 22px;
        }
        .van-picker-column__item--selected {
          color: #e4393e;
          font-size: 26px;
        }
      }
      .van-picker__cancel,
      .van-picker__confirm {
        font-size: 24px;
      }
    }
  }
}
</style>
